<template>
  <div id="app">
    <div :class="['nav', { 'nav-fixed': !isTop, 'nav-invisible': !isVisible }]">
      <div class="router">
        <div v-for="(item,index) in routerList" :key="index" @click="toPage(item.path)" class="item">{{item.name}}</div>
      </div>
    </div>
    <router-view />
  </div>
</template>
<script>
export default {
  name: "App",
  data() {
    return {
      isTop: true,
      isVisible: true,
      routerList: [
        { name: "首页", path: "/" },
        { name: "标签", path: "/tags" },
        { name: "关于", path: "/about" },
      ],
    };
  },
  created() {
    this.scroll()
  },
  computed: {
    route() {
      return this.$route.path;
    },
  },
  methods: {
    scroll() {
      let beforeScrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;
      window.onscroll = () => {
        const afterScrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;
        const delta = afterScrollTop - beforeScrollTop
        this.isTop = afterScrollTop === 0
        if (delta === 0) return false
        beforeScrollTop = afterScrollTop
        this.isVisible = delta <= 0
        if (afterScrollTop < 48) {
          this.isVisible = true
        }
      }
    },
    toPage(path) {
      this.$router.push({
        path,
      });
    },
  },
};
</script>
<style lang="scss" scoped>
#app {
  background-color: #fff;
  .nav {
    position: fixed;
    top: 0px;
    left: 0px;
    z-index:99999;
    width: 100%;
    .router {
      max-width: calc(100% - 5%);
      padding: 0px 0px;
      width: 100%;
      margin: 0 auto;
      text-align: right;
    }
    .item {
      display: inline-block;
      height: 60px;
      line-height: 60px;
      font-size: 15px;
      color: #fff;
      text-align: center;
      padding: 0px 20px;
      transition: 0.1s;
      &:hover {
        cursor: pointer;
        opacity: 0.9;
        transition: 0.1s;
      }
    }
  }
.nav {
  position: fixed;
  width: 100%;
  display: flex;
  -webkit-flex-flow: row wrap;
  justify-content: flex-end;
  background-color: rgba(0, 0, 0, 0);
  transition: all .4s;
  list-style: none;
  .item {
    margin: 0;
    opacity: 1;
    transition: opacity 0.4s;
    cursor: pointer;
    color: #fff;
  }
}

.nav-fixed {
  background-color: rgba(255, 255, 255, 0.95);
  border-bottom: 1px solid #bababa;
  .item {
      color: rgba(0, 0, 0, .8);
  }
}

.nav-invisible {
  transform: translate(0, -4rem)
}

.nav a:hover {
  opacity: 0.7;
}
}

</style>
